<template>
  <dtDialog
    :title="textMap[clientDialogStatus]"
    :visible.sync="DialogFormVisible"
    :is-loading="loading"
    :footer-slot="clientDialogStatus === 'detail'? true : false"
    @closeDialog="resetTemp()"
    @comfirmBtn="onSubmit()"
  >
    <el-form
      ref="clientDataForm"
      slot="content"
      :rules="rules"
      :model="clientTemp"
      label-position="right"
      label-width="128px"
      style="width: 100%;overflow-x: auto;"
      :disabled="clientDialogStatus == 'detail'"
    >
      <el-form-item label="租户(公司)名称" prop="tenantName">
        <el-input v-model.trim="clientTemp.tenantName" maxlength="20" show-word-limit
                  class="limit" placeholder="请输入租户(公司)名称" />
      </el-form-item>
      <el-form-item label="联系人" prop="contact">
        <el-input v-model.trim="clientTemp.contact" maxlength="20" show-word-limit
                  class="limit" placeholder="请输入联系人" />
      </el-form-item>
      <el-form-item label="联系人手机" prop="telephone">
        <el-input v-model.trim="clientTemp.telephone" maxlength="11" show-word-limit
                  class="limit" placeholder="请输入联系人手机" />
      </el-form-item>
      <el-form-item label="联系人邮箱" prop="email">
        <el-input v-model.trim="clientTemp.email" maxlength="50" show-word-limit
                  class="limit" placeholder="请输入联系人邮箱" />
      </el-form-item>
      <el-form-item label="公司地址" prop="address">
        <el-input v-model.trim="clientTemp.address" maxlength="100" show-word-limit
                  class="limit" :placeholder="clientDialogStatus == 'detail'?'':'请输入公司地址'" />
      </el-form-item>
      <el-form-item label="统一社会信用代码" prop="socialCode">
        <el-input v-model.trim="clientTemp.socialCode" maxlength="18" show-word-limit
                  class="limit" :placeholder="clientDialogStatus == 'detail'?'':'请输入统一社会信用代码'" />
      </el-form-item>
      <el-form-item label="绑定域名" prop="domainName">
        <el-input v-model.trim="clientTemp.domainName" maxlength="50" show-word-limit
                  class="limit" :placeholder="clientDialogStatus == 'detail'?'':'请输入绑定域名'" />
      </el-form-item>
      <el-form-item label="数据隔离方式" prop="isolationMode">
        <el-radio-group v-model="clientTemp.isolationMode" :disabled="clientDialogStatus == 'update'">
          <el-radio
            v-for="dict in dict.type.isolationMode"
            :key="dict.value"
            :label="parseInt(dict.value)"
          >{{ dict.label }}</el-radio>
        </el-radio-group>
        <div style=" font-size: 12px; line-height: 12px;margin-top: 2px;">选定隔离方式后不可更改。</div>
      </el-form-item>
      <el-form-item v-if="clientDialogStatus == 'detail'" label="租户应用" prop="apps">
        <el-tag v-if="apps">{{ apps }}</el-tag>
        <template v-else>
          <el-tag
            v-for="item in clientTemp.apps"
            :key="item.id"
            style="margin-right: 6px;"
            :disable-transitions="false"
          >
            {{ item }}
          </el-tag>
        </template>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model.trim="clientTemp.remark" maxlength="200" type="textarea"
                  show-word-limit class="limit" />
      </el-form-item>
      <el-row v-if="clientDialogStatus == 'detail'">
        <el-col :span="12">
          <el-form-item label="创建人" prop="createUser">
            {{ clientTemp.createUser }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="创建时间" prop="createTime">
            {{ clientTemp.createTime }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="clientDialogStatus == 'detail'">
        <el-col :span="12">
          <el-form-item label="修改人" prop="updateUser">
            {{ clientTemp.updateUser }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="修改时间" prop="updateTime">
            {{ clientTemp.updateTime }}
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </dtDialog>
</template>
<script>
import clientManageApi from '@/framework/api/clientManage'
import {
  // positiveInteger,
  // checkSpecialStr,
  checkEmail,
  isExternal,
  checkPhone
} from '@/framework/utils/validate'

export default {
  dicts: ['isolationMode'],
  data() {
    return {
      DialogFormVisible: false,
      clientDialogStatus: '',
      textMap: {
        update: '修改租户',
        create: '新增租户',
        detail: '租户详情'
      },
      clientTemp: {
        tenantName: '',
        contact: '',
        telephone: '',
        email: '',
        address: '',
        socialCode: '',
        domainName: '',
        isolationMode: '',
        remark: ''
      },
      apps: '',
      rules: {
        tenantName: [{ required: true, trigger: 'change', message: '请输入租户(公司)名称' }],
        contact: [{ required: true, trigger: 'change', message: '请输入联系人' }],
        telephone: [{
          required: true,
          trigger: 'change',
          validator: (rule, value, callback) => {
            if (!value) {
              callback(new Error('请输入手机号'))
            } else if (!checkPhone(value)) {
              callback(new Error('手机号格式错误'))
            } else callback()
          }
        }],
        email: [{
          required: true,
          trigger: 'change',
          validator: (rule, value, callback) => {
            if (!value) {
              callback(new Error('请输入邮箱'))
            } else if (!checkEmail(value)) {
              callback(new Error('邮箱格式错误'))
            } else callback()
          }
        }],
        // socialCode: [{
        //   required: false,
        //   trigger: 'change',
        //   validator: (rule, value, callback) => {
        //     if (value && !checkSocialCode(value)) {
        //       callback(new Error('社会信用代码格式错误'))
        //     } else callback()
        //   }
        // }],
        domainName: [{
          required: false,
          // trigger: 'blur',
          validator: (rule, value, callback) => {
            if (!value) {
              callback()
            } else if (!isExternal(value)) {
              callback(new Error('必须以 https:// 或者 http:// 开头'))
            } else {
              callback()
            }
          }
        }],
        isolationMode: [{ required: true, trigger: 'change', message: '请选择数据隔离方式' }]
        // remark: [{
        //   required: false,
        //   // trigger: 'blur',
        //   // validator: (rule, value, callback) => {
        //   //   if (!value) {
        //   //     callback()
        //   //   } else if (!checkSpecialStr(value)) {
        //   //     callback(new Error('不要输入特殊字符'))
        //   //   } else {
        //   //     callback()
        //   //   }
        //   // }
        // }]
      },
      loading: false
    }
  },
  methods: {
    // 关闭弹窗
    resetTemp() {
      this.$nextTick(() => {
        this.clientTemp = {}
        this.$refs['clientDataForm'].resetFields()
        this.apps = ''
      })
    },
    // 打开新增弹窗
    open(row, type) {
      this.DialogFormVisible = true
      this.clientDialogStatus = type
      if (this.clientDialogStatus === 'create') {
        this.clientTemp.isolationMode = 1
      } else {
        clientManageApi.detailTenant(row.id).then((res) => {
          this.clientTemp = Object.assign({}, res.data)
          if (this.clientTemp.apps.length <= 0) {
            this.apps = '无'
          }
        })
      }
      this.$nextTick(() => {
        this.$refs['clientDataForm'].clearValidate()
      })
    },
    async dealSubmitData() {
      let res = null
      const tempData = Object.assign({}, this.clientTemp)
      try {
        if (this.clientDialogStatus === 'create') {
          res = await clientManageApi.addTenant(tempData)
        } else {
          res = await clientManageApi.updateTenant(tempData)
        }
        if (res.success) {
          this.$parent.getList()
          this.DialogFormVisible = false
          this.$dtMessage({
            message: this.clientDialogStatus === 'create' ? '新增成功' : '修改成功',
            type: 'success'
          })
          this.loading = false
        }
      } catch (error) {
        this.loading = false
      }
    },
    // 创建请求
    async onSubmit() {
      this.$refs['clientDataForm'].validate(async (valid) => {
        if (valid) {
          this.loading = true
          try {
            this.dealSubmitData()
          } catch (error) {
            this.loading = false
          }
        }
      })
    }

  }
}
</script>
